<template>
	<!-- :class="`${show ? entryClass : exitClass}`" -->
	<view 
	class="animate__animated"
	:class="`${show ? entryClass : exitClass}`"
	:style="{
      ...customStyle,
      '--animate-duration': `${duration}ms`,
      '--animate-delay': `${delay}ms`,
	 
    }">
		<slot />
	</view>
</template>

<script>
	export default {
		name: "lm-animate",
		data() {
			return {
				delayShow: false,
				timer: null
			};
		},
		props: {
			//加载动画的显隐
			show: {
				type: Boolean,
				default: false,
			},
			//入场动画
			entryClass: {
				type: String,
				default: "animate__fadeIn",
			},
			//退场动画
			exitClass: {
				type: String,
				default: "animate__fadeOut",
			},
			//持续时间
			duration: {
				type: Number,
				default: 1500,
			},
			//延迟时间
			delay: {
				type: Number,
				default: 0,
			},
			//自定义样式
			customStyle: {
				type: Object,
				default: () => {},
			},
		},
		watch: {
			show: {
				handler(newVal) {
					if (this.timer) clearTimeout(this.timer);
					if (newVal) {
						this.delayShow = newVal;
						this.$emit("open");
						this.timer = setTimeout(
							() => {
								this.$emit("opened");
							},
							this.entryClass ? this.duration + this.delay : 0
						);
					} else {
						this.$emit("close");
						this.timer = setTimeout(
							() => {
								this.delayShow = newVal;
								this.$emit("closed");
							},
							this.exitClass ? this.duration + this.delay : 0
						);
					}
				},
				immediate: false,
			}
		}
	}
</script>

<style lang="scss">
	@import './animate.css';
</style>